<template>
  <!-- 财务报表 -->
  <div class="financial-statements">
    <c-title text="财务报表"></c-title>
    <d-list :loading="loading" :finished="finished" @load="onLoad">
      <div class="goods-detai" v-for="(item, index) in listData" :key="index">
        <div class="date">{{ item.created_at }}</div>
        <div class="goods-box">
          <img :src="item.thumb" alt="" />
          <div class="goods-name">
            {{ item.title }}
          </div>
        </div>
        <div class="bottom-pane">
          <div class="num">
            <div class="sale-num">
              销售总数量：<span class="text-color">{{ item.sale_nums }}</span>
            </div>
            <div class="surplus-num">
              剩余总数量：<span class="text-color">{{ item.rest_nums }}</span>
            </div>
          </div>
          <div class="price">
            <div class="cost-recovery">
              回收成本：<span class="text-color">{{ item.cost }}</span>
            </div>
            <div class="profit">
              利润：<span class="text-color">{{ item.profit }}</span>
            </div>
          </div>
        </div>
      </div>
    </d-list>
  </div>
</template>

<script>
import financialStatements_controller from "./financialStatements_controller";

export default financialStatements_controller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.financial-statements {
  margin: 0 0.63rem;
  padding-bottom: 0.6rem;

  .goods-detai {
    padding: 0.74rem 0.63rem 0.68rem 0.63rem;
    background: #fff;
    border-radius: 0.31rem;
    margin-top: 0.6rem;

    .date {
      font-size: 0.63rem;
      font-weight: 400;
      color: #807e7e;
      margin-bottom: 0.6rem;
      text-align: left;
    }

    .goods-box {
      display: flex;
      margin-bottom: 0.98rem;

      img {
        width: 2.8rem;
        height: 2.8rem;
        border-radius: 0.19rem;
        margin: 0 !important;
      }

      .goods-name {
        margin-left: 0.66rem;
        font-size: 0.81rem;
        font-weight: 400;
        color: #242424;
        text-align: left;
        line-height: 1.1;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        text-overflow: ellipsis;
        height: 90%;
      }
    }

    .bottom-pane {
      border-top: 1px solid #ececec;
      padding-top: 0.75rem;

      .text-color {
        color: #f20606;
      }

      .num {
        font-size: 0.75rem;
        font-weight: 400;
        color: #666;
        display: flex;

        .sale-num {
          flex: 1;
          text-align: left;
          display: flex;
        }

        .surplus-num {
          flex: 1;
          text-align: left;
          display: flex;
        }
      }

      .price {
        margin-top: 0.64rem;
        font-size: 0.75rem;
        font-weight: 400;
        color: #666;
        display: flex;

        .cost-recovery {
          flex: 1;
          text-align: left;
          display: flex;
        }

        .profit {
          flex: 1;
          text-align: left;
          display: flex;
        }
      }
    }
  }
}
</style>
